<template>
  <div class="editor-panel" @click="handleClickCanvas">
    <elem-shortcut-tool ref="shortTool" />
    <div class="editor-pane-inner" ref="editorPaneInner">
      <div class="editor-bottom" :style="editPanelStyle"></div>
      <div class="editor-main" ref="canvas-panel" id="canvas-panel" :style="editPanelStyle">
        <div class="page-preview-wrapper" :style="getCommonStyle(getcurrSceneCommonStyle)" id="canvas-panel-inner">
          <resize-widget
            v-for="item in elems"
            :key="item.uuid"
            :uuid="item.uuid"
            :defaultStyle="item.commonStyle"
            :style="getCommonStyle(item.commonStyle)"
            :active="item.uuid === currElementUUID"
            :locked="item.locked"
            :wrapId="'canvas-panel-inner'"
            :scale="scaleSize"
            @on-element-click="handleElementClick(item.uuid)"
            @on-resize="handleElementResize"
          >
            <component class="components-item" :is="item.elName" v-bind="{ ...item.propsValue, value: item.value }" @update:value="handleValueChange" />
          </resize-widget>
        </div>
      </div>
    </div>
    <context-menu v-if="contextMenuTarget !== null" :target="contextMenuTarget" :show="showContextMenu" @update:show="beforeContextMenuShow">
      <quick-tool @selected="showContextMenu = false" v-bind="{...orgData}" />
    </context-menu>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import { registerComponents } from '@/plugins/index';
import { getCommonStyle } from '@/utils';
export default {
  components: {
    ...registerComponents,
    'resize-widget': () => import('@/components/resize-widget'),
    'elem-shortcut-tool': () => import('@/components/program-editor/elem-shortcut-tool'),
    'context-menu': () => import('@/components/context-menu'),
    'quick-tool': () => import('@/components/program-editor/quick-tool')
  },
  props: {
    scale: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      elems: [],
      contextMenuTarget: null,
      showContextMenu: false,
      scaleSize: 0,
      topLen: 0
    };
  },
  computed: {
    ...mapState('programs', ['pageData', 'currElementUUID', 'currSceneUUID', 'fullBeforeElement']),
    ...mapGetters('programs', ['currScene', 'currElement']),
    orgData(){
      let orgCurrElementData = {};
      if(this.currElement){
        let { fullBeforeElement, currElement } = this;
        return {
          orgCurrElementData: fullBeforeElement[currElement.uuid],
          nowUUID: currElement.uuid
        }
      }else{
        return {}
      }
    },
    editPanelStyle() {
      const { scale, pageData, currScene, scaleSize } = this;
      if (!currScene) {
        return {};
      }
      return {
        transform: 'scale(' + this.scaleSize + ')',
        width: pageData.width + 'px',
        height: pageData.height + 'px',
        backgroundColor: currScene.commonStyle && currScene.commonStyle.backgroundColor ? currScene.commonStyle.backgroundColor : '#ffffff',
        top: this.topLen + 'px'
      };
    },
    getcurrSceneCommonStyle() {
      const { scale, pageData, currScene } = this;
      if (!currScene) {
        return '';
      }
      return currScene.commonStyle;
    }
  },
  watch: {
    currScene: {
      deep: true,
      handler(v1, v2) {
        if (v1 && v1.elements) {
          let list = [];
          v1.elements.forEach(item => {
            if (item.elName === 'sxc-live') {
              if (item.propsValue.liveSrcList[0]) {
                if (item.propsValue.liveSrcList[0].length > 0) {
                  list.push(item);
                }
              }
            } else {
              list.push(item);
            }
          });
          this.elems = [...list];
        } else {
          this.elems = [];
        }
      }
    },
    scale(v1, v2) {
      if (v1 > v2) {
        this.scaleSize = this.scaleSize + v2;
      }
      if (v1 < v2) {
        this.scaleSize = this.scaleSize - v1;
      }
    }
  },
  mounted() {
    if (this.currScene && this.currScene.elements) {
      this.elems = [...this.currScene.elements];
    }
    this.$nextTick(() => {
      this.contextMenuTarget = document.getElementById('canvas-panel');
      this.scaleSize = this.$refs.editorPaneInner.offsetWidth / 1920;
      this.topLen = this.$refs.editorPaneInner.offsetHeight / 2 - (this.scaleSize * document.getElementById('canvas-panel').offsetHeight) / 2;
    });
  },
  methods: {
    getCommonStyle,
    ...mapMutations('programs', ['updateElementStyle', 'setCurrElementUUID', 'updateElementValue', 'setFullBeforeElement']),
    ...mapActions('programs', ['postScreenShots', 'getSceneCover']),
    handleElementResize(pos) {
      this.updateElementStyle(pos);
    },
    handleElementClick(uuid) {
      this.setCurrElementUUID(uuid);
    },
    handleClickCanvas(e) {
      if (!e.target.classList.contains('elem-on-edit-panel') && !e.target.classList.contains('iconfont')) {
        this.setCurrElementUUID('');
      }
    },
    handleValueChange(e) {
      this.updateElementValue(e);
    },
    beforeContextMenuShow(show) {
      if (this.currElementUUID) {
        this.showContextMenu = show;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.editor-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #f5f5f5;
  border-width: 0 1px;
  background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
  display: flex;
  justify-content: flex-start;
}
.editor-pane-inner {
  height: 100%;
  width: calc(100% - 40px);
  padding: 20px;
  box-sizing: border-box;
}
.editor-bottom {
  margin: auto;
  position: absolute;
  transform-origin: 0% 0%;
  background-image: url('../../assets/img/bg_transparent_16.png');
  background-repeat: repeat;
}
.editor-main {
  margin: auto;
  position: absolute;
  background: #ffffff;
  transform-origin: 0% 0%;
  border-radius: 3px;
  box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.44);
  .elem-on-edit-panel {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
}
.page-preview-wrapper {
  height: 100%;
  position: relative;
}
.components-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
</style>
